React菜雞-Day2：來～我們捲起袖子，用create-react-app建構好React環境

第 12 屆 iThome 鐵人賽

DAY 2

自我挑戰組

菜雞們，讓我們一起征服JS及React吧系列第 2 篇

12th鐵人賽

小偉哥

2020-09-05 11:32:45

3032 瀏覽

分享至

tags: `鐵人賽` `React` `javascript` `nodejs` `vscode`

來到了鐵人賽的第二天。今天我們要講解如何快速地建構好開發React的環境，我們會使用create-react-app這套工具。

安裝 create-react-app

create-react-app是一套由官方維護的js套件，簡單來說，它把所有會用到的工具套件都幫你安裝完畢，這對新手菜雞們來說，可是一大福音。

先建立一個資料夾，方便我們未來coding:

MacOS及Linux可以建立在~/Documents/react-rookie

Windows可以建立在D:\react-rookie

輸入以下指令，開始安裝

npx create-react-app my-app

補腦時間:npx指令是啥?

先聊聊昨天安裝好的npm，全名為node package management，是nodejs的套件管理工具，就像是一個App Store一樣，要什麼工具就可透過它下載及管理套件。

不過npm有些缺點，例如：我們下達一個指令npm install -g tool-package，這個套件本身若有使用到其他套件，也就俗稱的相依套件(dependency)，相依的部分也會跟著一起被安裝進來。隨著你開發的專案越多，使用的套件也會跟著變多，重複安裝的套件可能性提高，造成 版本污染(見下方補充) 的問題。?

-g代表著global，也就是把這個套件安裝在一個大家都看得到的地方。

為了解決這樣的問題，npx就像救世主一樣現身了，安裝套件時，他會把相依的套件放在一個臨時的資料夾，等到主要的套件完成初始化後，就刪除後掰掰不送，乾淨利落?

版本污染就跟你有兩個心儀的女生都叫CoCo，手機電話簿裡都輸入CoCo，哪一天CoCo打來說妳都不陪她，妳可能會滿臉黑人問號的想著～到底是哪個摳摳?。

官網也力推我們用npx，那就安心服用吧

動起來～React!

先開啟你的瀏覽器(browser)
打開終端機(terminal)輸入指令到專案資料夾~/Documents/react-rookie/my-app

MacOS及Linux的用戶

cd ~/Documents/react-rookie/my-app
npm start

Windows的用戶

cd D:\react-rookie\my-app
npm start

轉吧～React!?

解析資訊

按下npm start之後，順勢啟動了server加上3000的port，外部的人也可以連進來看看你的成果。疑~?我們不是做前端嗎？誰幫我弄了個server?
這都得歸功於create-react-app這套件，裡面也很佛心的幫你把前端的網頁用一個server給包裝起來，讓你一個按鍵就能看到網頁，優秀吧！?

改個東西讓畫面不一樣

-用vscode打開App.js，在第14行的地方加入一段程式碼，並按下儲存！

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        {/* 加一段程式碼 */}
        <h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;